<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="90%"
    :before-close="changedialogVisible"
  >
    <div style="background-color: #f3f6fa">
      <div class="title">
        <span class="title-name">项目一览</span>
        <div class="tag-button">
          <el-button
            v-if="isvalid"
            v-hasPermi="['project:info:edit']"
            type="primary"
            style="padding: 6px 20px"
            @click="edit"
            >{{ buttonName }}</el-button
          >
        </div>
      </div>
      <div class="nav">
        <div class="left">
          <div class="tag"></div>
          <div class="label">项目基本信息</div>
        </div>
        <div class="right" v-if="showinfo0" @click="changeshow0">
          <div class="label">收起</div>
          <div class="icon">▲</div>
        </div>
        <div class="right" v-if="!showinfo0" @click="changeshow0">
          <div class="label">展开</div>
          <div class="icon">▼</div>
        </div>
      </div>
      <div class="tabletitle" v-if="showinfo0">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label">项目名称</div>
              <div class="input-content">
                <div class="content">{{ general.name }}</div>
                <!-- <el-input v-model="general.name" :disabled="true" type="textarea" rows="2" /> -->
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="input-wrap">
              <div class="input-label">委托单位</div>
              <div class="input-content">
                <el-input v-model="general.party" :disabled="true" />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label">项目代码</div>
              <div class="input-content">
                <el-input v-model="general.code" :disabled="true" />
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="input-wrap">
              <div class="input-label">项目执行部门</div>
              <div class="input-content">
                <el-input v-model="general.executeDept" :disabled="true" />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label">项目负责人</div>
              <div class="input-content">
                <el-input
                  style="width: auto"
                  v-model="general.projectLeaderName"
                  :disabled="true"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="input-wrap">
              <div class="input-label">结项状态</div>
              <div class="input-content">
                <el-input v-model="general.closureSituation" :disabled="true" />
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">可从事的业务类别</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="general.useBusinessCategory"
                  :disabled="true"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24">
          <div class="input-wrap">
            <div class="input-label">包含的业务类别</div>
            <div class="input-content">
              <el-input type="textarea" autosize v-model="general.businessCategory" :disabled="true" />
            </div>
          </div>
        </el-col>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label"><span style="color:red;">*</span>项目进展</div>
              <div class="input-content">
                <el-select
                  v-model="general.status"
                  placeholder="请选择项目进展"
                  :disabled="!isEdit"
                >
                  <el-option
                    v-for="dict in statusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                    :disabled="dict.dictValue === '6' ? true : false"
                  />
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label"><span style="color:red;">*</span>开始服务日期</div>
              <div class="input-content">
                <el-date-picker
                  v-model="general.startDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :disabled="!isEdit"
                  :picker-options="pickerOptionsStart"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label">完成服务日期</div>
              <div class="input-content">
                <el-date-picker
                  v-model="general.endDate"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                  :disabled="!isEdit"
                  :picker-options="pickerOptionsEnd"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label"><span style="color:red;">*</span>所在地区</div>
              <div class="input-content">
                <el-input
                  v-if="!isEdit"
                  v-model="general.areaName"
                  style="width: 100%"
                  :disabled="!isEdit"
                />
                <el-cascader
                  v-if="isEdit"
                  v-model="general.areas"
                  :options="areaOptions"
                  filterable
                  :props="{ value: 'id', checkStrictly: true }"
                  style="width: 100%"
                  :disabled="!isEdit"
                  @change="getLastNodes"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="input-wrap">
              <div class="input-label">项目地址</div>
              <div class="input-content">
                <el-input
                  v-model="general.address"
                  placeholder="请输入"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label">项目总投资(万元)</div>
              <div class="input-content">
                <el-input
                  v-model="general.investment"
                  :disabled="!isEdit"
                  type="number"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label">所属行业</div>
              <div class="input-content">
                <el-cascader
                  v-model="general.industrys"
                  :options="industryOptions"
                  filterable
                  clearable
                  :props="{ value: 'id', checkStrictly: true }"
                  style="width: 100%"
                  :disabled="!isEdit"
                  @change="getLastNodesIndustry"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label">建设类型</div>
              <div class="input-content">
                <el-select
                  v-model="general.constructionType"
                  placeholder="请选择建设类型"
                  :disabled="!isEdit"
                  clearable
                >
                  <el-option label="新建" value="0" />
                  <el-option label="改扩建" value="1" />
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">建设内容及规模</div>
              <div class="input-content">
                <el-input
                  autosize
                  v-if="isEdit"
                  v-model="general.content"
                  placeholder="请输入"
                  type="textarea"
                  rows="2"
                />
                <div v-else class="content">{{ general.content }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
          <div class="input-wrap">
            <div class="input-label">服务内容</div>
            <div class="input-content">
              <el-input
                autosize
                v-if="isEdit"
                v-model="general.mainServiceContent"
                placeholder="请输入"
                type="textarea"
                rows="2"
              />
              <div v-else class="content">{{ general.mainServiceContent }}</div>
            </div>
          </div>
        </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">相关链接</div>
              <div class="input-content">
                <el-row
                  v-for="(item, index) in general.linkArray"
                  :key="index"
                  :gutter="20"
                  style="margin-bottom: 8px"
                >
                  <el-col :span="6">
                    <el-input
                      v-if="isEdit"
                      v-model="item.linkName"
                      placeholder="请输入链接名称"
                    />
                  </el-col>
                  <el-col :span="12">
                    <a
                      v-if="!isEdit"
                      :href="item.linkUrl"
                      target="_blank"
                      style="
                        margin-top: 8px;
                        display: block;
                        color: blue;
                        padding-left: 15px;
                        text-decoration: underline;
                      "
                      >{{ item.linkName }}</a
                    >
                    <el-input
                      v-else
                      v-model="item.linkUrl"
                      placeholder="请输入完整的URL地址链接,http://开头或https://开头"
                    />
                  </el-col>
                  <el-col :span="6">
                    <el-button
                      v-if="index === 0"
                      v-show="isEdit"
                      @click="addLink"
                      >新增</el-button
                    >
                    <el-button v-show="isEdit" @click="delLink(index)"
                      >删除</el-button
                    >
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="nav">
        <div class="left">
          <div class="tag"></div>
          <div class="label">展示项目信息</div>
        </div>
        <div class="right" v-if="showinfo1" @click="changeshow1">
          <div class="label">收起</div>
          <div class="icon">▲</div>
        </div>
        <div class="right" v-if="!showinfo1" @click="changeshow1">
          <div class="label">展开</div>
          <div class="icon">▼</div>
        </div>
      </div>
      <div class="tabletitle" v-if="showinfo1">
        <el-row>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label">是否启用项目展示</div>
              <div class="input-content">
                <el-select
                  v-model="general.showProject"
                  placeholder="请选择是否启用项目展示"
                  @change="changeShowProject"
                  :disabled="!isEdit"
                >
                  <el-option label="否" value="0" />
                  <el-option label="是" value="1" />
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label"><span v-if="isShowFlag" style="color:red;">*</span>是否保密工程</div>
              <div class="input-content">
                <el-select
                  v-model="general.isSecurity"
                  placeholder="请选择是否保密工程"
                  :disabled="!isEdit"
                >
                  <el-option label="否" value="0" />
                  <el-option label="是" value="1" />
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label"><span v-if="isShowFlag" style="color:red;">*</span>是否分享</div>
              <div class="input-content">
                <el-select
                  v-model="general.isShare"
                  placeholder="请选择是否分享"
                  :disabled="!isEdit"
                  @change="changeIsShare"
                >
                 <el-option label="不分享" value="0" />
                <el-option label="部分分享" value="2" />
                <el-option label="完整分享" value="1" />
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label"><span v-if="isShowFlag" style="color:red;">*</span>展示项目名称</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="general.showProjectName"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">展示项目团队</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="general.showProjectMember"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <!--<el-col :span="8">
            <div class="input-wrap">
              <div class="input-label">地图经纬度</div>
              <div class="input-content">
                <el-input v-model="general.lonLat" :disabled="!isEdit" />
              </div>
            </div>
          </el-col>-->
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label"><span v-if="isShowFlag" style="color:red;">*</span>项目概况描述</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="general.projectDesc"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label"><span v-if="isShowFlag" style="color:red;">*</span>项目特点与成效</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="general.specEffect"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">项目所获荣誉</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="general.showHonor"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="input-wrap">
              <div class="input-label"><span v-if="isShowFlag" style="color:red;">*</span>项目展示主图</div>
              <div class="input-content">
                <div v-if="general.projectMain" style="width:19%; max-height: 80px;">
                  <img
                    v-if="general.projectMain"
                    :src="general.projectMain.storagePath"
                    style="height: 80px"
                  />
                  <i v-if="isEdit" class="el-icon el-icon-delete" style="position: relative; top: -25px; left: 5px; background-color: #000; color:#FFF;cursor: pointer;" @click="delimgMain()"/>
                </div>
                <el-upload
                  v-show="isEdit"
                  class="upload-demo"
                  drag
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeUploadMain"
                >
                  <!-- <div class="el-upload__text">
                  <em>
                    <svg-icon icon-class="upload2" class="uploadicon" />点击上传或拖拽图片到此上传(建议传16:9比例图片)
                  </em>
                </div>-->
                  <i class="el-icon-upload" />
                  <div class="el-upload__text">
                    将图片拖到此处，或
                    <em>点击上传</em>(建议传16:9比例图片)
                  </div>
                </el-upload>
              </div>
            </div>
          </el-col>
           <el-col :span="16">
          <div class="input-wrap">
            <div class="input-label">项目展示图片</div>
            <div style="display:block; padding: 5px 10px;">
              <div class="input-content" style="display: flex; justify-content: space-between; align-items: center;">
              <div v-if="currentImg<=0" style="font-size: 20px; background-color: #f3f6fa; color: #b5c1d2; cursor: pointer; padding: 20px 10px;">◀</div>
             
              <div v-if="currentImg>0" style="font-size: 20px; background-color: #EEF; color: #BBB; cursor: pointer; padding: 20px 10px;" @click="prevPage">◀</div>
              <div v-for="(item,index) in general.bmsAttachments" :key="index" v-show="index>=currentImg && index<=currentImg+5" style="width:19%; max-height: 80px;">
                <img :src="item.storagePath" style="width:100%; max-height: 80px; padding: 5px;"/>
                <i v-if="isEdit" class="el-icon el-icon-delete" style="position: relative; top: -25px; left: 5px; background-color: #000; color:#FFF;cursor: pointer;" @click="delimg(index)"/>
              </div>
              <div v-if="currentImg>=general.bmsAttachments.length-5" style="font-size: 20px; background-color: #f3f6fa; color: #b5c1d2; cursor: pointer; padding: 20px 10px;">▶</div>
              <div v-if="currentImg<general.bmsAttachments.length-5" style="font-size: 20px; background-color: #EEF; color: #BBB; cursor: pointer; padding: 20px 10px;" @click="nextPage">▶</div>
               
               
            </div>
            <div>
<el-upload
                v-show="!lockFlag && isEdit"
                class="upload-demo"
                drag
                action="#"
                :show-file-list="false"
                :before-upload="beforeUpload"
              >
                <!-- <div class="el-upload__text">
                  <em>
                    <svg-icon icon-class="upload2" class="uploadicon" />点击上传或拖拽图片到此上传(建议传16:9比例图片)
                  </em>
                </div>-->
                <i class="el-icon-upload" />
                <div class="el-upload__text">
                  将图片拖到此处，或
                  <em>点击上传</em>(建议传16:9比例图片)
                </div>
              </el-upload>
               </div>
            </div>
          </div>
        </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">附件</div>
              <div class="input-content">
                <vue-uploader
                  v-if="attFlag"
                  :single-type="false"
                  :file-list="general.projectAtts"
                  :pathName="pathName"
                  :upload-readonly="!isEdit"
                  @changeFileData="changeFile"
                  @removeFileList="removeFileList"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="nav">
        <div class="left">
          <div class="tag"></div>
          <div class="label">项目指标</div>
        </div>
        <div class="right" v-if="showinfo2" @click="changeshow2">
          <div class="label">收起</div>
          <div class="icon">▲</div>
        </div>
        <div class="right" v-if="!showinfo2" @click="changeshow2">
          <div class="label">展开</div>
          <div class="icon">▼</div>
        </div>
      </div>
      <div class="tabletitle" v-if="showinfo2">
        <el-row>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label"><span v-if="isShowFlag" style="color:red;">*</span>包含工程类别</div>
              <div
                class="input-content"
                style="
                  display: flex;
                  justify-content: flex-start;
                  align: center;
                  padding: 10px;
                "
              >
                <el-checkbox-group v-model="engineeringIds">
                  <el-checkbox
                    :disabled="!isEdit"
                    v-for="item in dataTable.bmsMdEngineeringCategorys"
                    :key="item.engineeringId"
                    :label="item.engineeringId"
                    @change="handlebmsMdEngineeringCategorys"
                    >{{ item.engineeringName }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">细分类别</div>
              <div class="input-content" style="padding: 10px">
                <div
                  style="display: block; width: 100%; padding: 10px"
                  v-for="item in categorys[0]"
                  :key="item.engineeringId"
                >
                  <el-checkbox-group
                    v-model="categorysTwoIds"
                    style="
                      padding-bottom: 3px;
                      margin-bottom: 3px;
                      border-bottom: 1px solid #ccc;
                    "
                  >
                    <el-checkbox
                      :disabled="!isEdit"
                      style="min-width: 120px"
                      :label="item.engineeringId"
                      @change="handleTwo"
                      >{{ item.engineeringName }}</el-checkbox
                    >
                  </el-checkbox-group>
                  <div
                    style="
                      display: flex;
                      justify-content: flex-start;
                      align-items: center;
                      flex-wrap: wrap;
                    "
                  >
                    <div
                      style="display: inline; min-width: 120px"
                      v-for="obj in item.children"
                      :key="obj.engineeringId"
                    >
                      <el-checkbox-group v-model="categorysIds">
                        <el-checkbox
                          :disabled="!isEdit"
                          :label="obj.engineeringId"
                          @change="handleThree"
                          >{{ obj.engineeringName }}</el-checkbox
                        >
                      </el-checkbox-group>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">业绩推荐关键字</div>
              <div
                class="input-content"
                style="
                  display: flex;
                  justify-content: flex-start;
                  align: center;
                  padding: 10px;
                "
              >
                <el-checkbox-group v-model="performanceKeywordIds">
                  <el-checkbox
                    :disabled="!isEdit"
                    v-for="item in dataTable.bmsMdPerformanceKeywords"
                    :key="item.performanceKeywordId"
                    :label="item.performanceKeywordId"
                    @change="handleWords"
                    >{{ item.performanceKeywordName }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
          </el-col>
          <el-form ref="form" :model="form" label-width="200px" :inline="true">
            <el-form-item
              v-for="item in getProjectIndicators"
              :key="item.indicatorId"
              :label="item.indicatorName"
              :prop="item.required + item.indicatorId"
              :rules="{
                required: item.required,
                message: item.indicatorName + '不能为空',
                trigger: 'blur',
              }"
            >
              <el-input
                :disabled="!isEdit"
                v-if="item.fieldUnit === 0"
                v-model="form[item.required + item.indicatorId]"
                placeholder="请输入"
                type="number"
              />
              <el-input
                :disabled="!isEdit"
                v-else-if="item.fieldUnit === 1"
                v-model="form[item.required + item.indicatorId]"
                placeholder="请输入"
              />
              <el-select
                v-else-if="item.fieldUnit === 2"
                v-model="form[item.required + item.indicatorId]"
                :disabled="!isEdit"
              >
                <el-option
                  v-for="obj in item.dictDatas"
                  :key="obj.dictValue"
                  :label="obj.dictLabel"
                  :value="obj.dictValue"
                />
              </el-select>
              <el-input
                v-else-if="item.fieldUnit === 3"
                v-model="form[item.required + item.indicatorId]"
                placeholder="请输入"
                :disabled="!isEdit"
                type="textarea"
                :rows="2"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <div style="width: 100%; height: 50px"></div>
      <!-- 预览 -->
      <el-dialog :visible.sync="openPreview" width="80%">
        <iframe
          :src="manualPreviewUrl"
          frameborder="0"
          width="100%"
          height="700px"
        ></iframe>
      </el-dialog>
    </div>
  </el-dialog>
</template>
<script>
import {
  listGeneral,
  updateGeneral,
  uploadImages,
  synchronizeProject,
} from "@/api/projectWorkbench/projectList/projectGeneral";
import { provinceCity, provinceCityTree } from "@/api/provinceCity";
import { industryCategoryTreeTwo } from "@/api/industryCategory";
import { getProjectShowDetail } from "@/api/projectShowLibrary/projectShowLibrary";
import aTitle from "@/components/Title";
import {
  projectIndex,
  updateIndex,
  getIndicators,
} from "@/api/projectWorkbench/projectList/projectIndex";
import vueUploader from "@/components/Uploader";

export default {
  name: "ProjectEdit",
  components: { aTitle, vueUploader },
  props: {
    projectId: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isShowFlag:false,
      pathName: "",
      manualPreviewUrl: null,
      openPreview: false,
      form: {},
      dataTable: [],
      performanceKeywordIds: [],
      engineeringIds: [],
      categorys: [],
      categorysTwoIds: [],
      categorysIds: [],
      projectIndicators: [],
      getProjectIndicators: [],
      isvalid: true,
      guid: undefined,
      projectShowInfo: undefined,
      manualPreviewUrl: null,
      openPreview: false,
      api: "",
      taskSingle: true,
      showinfo0: true,
      showinfo1: true,
      showinfo2: true,
      showProjectInf: {},
      attFlag: false,
      general: {
        name: "",
        code: "",
        state: "",
        startDate: "",
        endDate: "",
        executeDept: "",
        projectLeader: "",
        party: "",
        area: [],
        address: "",
        investment: "",
        constructionCost: "",
        content: "",
        honors: "",
        businessCategory: "",
        link: "",
        linkArray: [],
        areas: "",
        bmsAttachments: [],
        isvalid: false,
        showProject: undefined,
        isSecurity: "0",
        isShare: "0",
        projectMain: {
          guid: "",
          storagePath: "",
          fileName: "",
        },
        projectAttIds: [],
      },
      currentImg: 0,
      areaOptions: [],
      industryOptions: [],
      isEdit: false,
      buttonName: "编辑",
      statusOptions: [],
      pickerOptionsStart: {
        disabledDate: (time) => {
          const endDateVal = this.general.endDate;
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime();
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          const beginDateVal = this.general.startDate;
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime();
          }
        },
      },
    };
  },
  created() {
    this.api = process.env.VUE_APP_BASE_API;
    this.getDicts("sys_project_status").then((response) => {
      this.statusOptions = response.data;
    });

    //行业类别
    industryCategoryTreeTwo().then((res) => {
      if (res.code === 200) {
        this.industryOptions = res.data;
      }
    });
    this.getIndex();
    this.pathName = `TJECdocuments/${this.$route.params.id}/项目概况`;
  },
  mounted() {
    if (this.projectId) {
      this.guid = this.projectId;
      this.getInfo();
    }
  },
  methods: {
    // 附件操作
    changeFile(id, name) {
      this.general.projectAttIds.push(id);
    },
    removeFileList(id) {
      this.general.projectAttIds = this.general.projectAttIds.filter(
        (item) => item != id
      );
      this.general.projectAtts = this.general.projectAtts.filter(
        (item) => item.guid != id
      );
    },
    changedialogVisible(val) {
      this.$emit("changedialogVisible", false);
    },
    handleTwo(val) {
      if (!val) {
        this.categorysIds = [];
      }
      this.getProjectIndicatorsList(val);
    },
    handleThree(val) {
      if (!val) {
        this.categorysTwoIds = [];
      }
      this.categorysIds.map((item) => {
        this.categorys[0].map((obj) => {
          if (obj.children.length > 0) {
            obj.children.map((val) => {
              if (val.engineeringId === item) {
                console.log(this.categorysTwoIds, "this.categorysTwoIds");
                this.categorysTwoIds = this.categorysTwoIds.filter(
                  (a) => a !== val.parentId
                );
                this.categorysTwoIds.push(val.parentId);
              }
            });
          }
        });
      });
      this.getProjectIndicatorsList(val);
    },
    handleWords(val) {
      this.getProjectIndicatorsList(val);
    },
    getProjectIndicatorsList() {
      this.getProjectIndicators = [];
      this.projectIndicators = [];
      const loading = this.$loading({
        lock: true,
        text: "Loading",
      });
      const form = {
        engineeringIds: [],
        performanceKeywordIds: [],
        projectId: this.$route.params.id,
      };
      form.engineeringIds = this.engineeringIds
        .concat(this.categorysTwoIds)
        .concat(this.categorysIds);
      form.performanceKeywordIds = this.performanceKeywordIds;
      getIndicators(form).then((res) => {
        if (res.code === 200) {
          console.log(res);
          this.projectIndicators = res.data;
          this.projectIndicators.forEach((item) => {
            const index = this.getProjectIndicators.findIndex((i) => {
              return i.indicatorId === item.indicatorId;
            });
            if (index > -1) {
              if (item.required) {
                this.getProjectIndicators.splice(index, 1, item);
              }
              return;
            }
            this.getProjectIndicators.push(item);
            console.log(this.getProjectIndicators, "111");
          });
          this.form = {};
          this.getProjectIndicators.map((item) => {
            this.$set(
              this.form,
              item.required + item.indicatorId,
              item.indicatorValue
            );
          });
          loading.close();
        }
      });
    },
    getIndex() {
      this.engineeringIds = [];
      (this.performanceKeywordIds = []),
        (this.engineeringIds = []),
        (this.categorys = []),
        (this.categorysTwoIds = []),
        (this.categorysIds = []),
        (this.projectIndicators = []),
        (this.getProjectIndicators = []),
        (this.dataTable = []);
      this.form = {};
      const loading = this.$loading({
        lock: true,
        text: "Loading",
      });
      projectIndex({ projectId: this.$route.params.id }).then((res) => {
        this.dataTable = res;

        res.bmsMdEngineeringCategorys
          .filter((item) => item.selected === true)
          .map((item) => {
            this.engineeringIds.push(item.engineeringId);
            if (item.children.length > 0) {
              this.categorys.push(item.children);
              item.children
                .filter((obj) => obj.selected === true)
                .map((obj) => {
                  this.categorysTwoIds.push(obj.engineeringId);
                });
              item.children.map((obj) => {
                if (obj.children.length > 0) {
                  obj.children
                    .filter((obj) => obj.selected === true)
                    .map((obj) => {
                      this.categorysIds.push(obj.engineeringId);
                    });
                }
              });
            }
          });

        res.bmsMdPerformanceKeywords
          .filter((item) => item.selected === true)
          .map((item) => {
            this.performanceKeywordIds.push(item.performanceKeywordId);
          });

        this.getProjectIndicatorsList();
      });
    },
    handlebmsMdEngineeringCategorys(val) {
      if (!val) {
        this.categorys = [];
        this.categorysTwoIds = [];
        this.categorysIds = [];
        this.projectIndicators = [];
      }
      this.engineeringIds.map((obj) => {
        this.dataTable.bmsMdEngineeringCategorys.map((item) => {
          if (item.children.length > 0 && item.engineeringId === obj) {
            this.categorys.push(item.children);
          }
        });
      });
      this.getProjectIndicatorsList();
    },
    getInfo() {
      this.attFlag = false;
      listGeneral(this.guid).then((res) => {
        if (res.code === 200) {
          this.general = res.data;
          if(this.general && this.general.showProject==='1'){
            this.isShowFlag = true;
          }else{
            this.isShowFlag = false;
          }
          this.attFlag = true;
        }
      });
    },
    edit() {
      if (!this.isEdit) {
        this.buttonName = "保存";
        this.isEdit = !this.isEdit;
        if (this.general.linkArray === null) {
          this.general.linkArray = [];
        }
        this.general.linkArray.push({
          linkName: "",
          linkUrl: "",
        });
        //省市区加载
        provinceCityTree().then((res) => {
          if (res.code === 200) {
            this.areaOptions = res.data;
          }
        });
      } else {
        this.$refs["form"].validate((valid, name) => {
          if (valid) {
            let indicatorValues = {};
            indicatorValues = this.getProjectIndicators.map((item) => {
              return {
                [item.indicatorId]: this.form[
                  item.isRequired + item.indicatorId
                ],
              };
            });

            const indexList = {
              performanceKeywordIds: this.performanceKeywordIds,
              guid: this.dataTable.guid,
              projectId: this.dataTable.projectId,
              engineeringIds: this.engineeringIds
                .concat(this.categorysTwoIds)
                .concat(this.categorysIds),
              indicators: indicatorValues,
            };

            if (this.general.status === null) {
              this.msgError("项目进展不能为空！");
              return false;
            }
            if (this.general.startDate === null) {
              this.msgError("开始服务日期不能为空！");
              return false;
            }
            if (this.general.areas === null) {
              this.msgError("所在地区不能为空！");
              return false;
            }
            if (this.general.areas.length === 0) {
              this.msgError("所在地区不能为空！");
              return false;
            }

            if(this.isShowFlag){
              if(!this.general.isSecurity){
                this.msgError("是否保密工程不能为空！");
                return false;
              }
              if(!this.general.isShare){
                this.msgError("是否分享不能为空！");
                return false;
              }

              if(!this.general.showProjectName){
                this.msgError("展示项目名称不能为空！");
                return false;
              }
              if(!this.general.projectDesc){
                this.msgError("项目概况描述不能为空！");
                return false;
              }

              if(!this.general.specEffect){
                this.msgError("项目特点与成效不能为空！");
                return false;
              }

              if(!this.general.projectMain){
                this.msgError("项目展示主图不能为空！");
                return false;
              }

              if(this.engineeringIds.length===0){
                this.msgError("包含工程类别不能为空！");
                return false;
              }
            }

              
            if (
              !this.general.linkArray
                .filter((item) => item.linkName !== "" || item.linkUrl !== "")
                .every((item) => {
                  return (
                    item.linkUrl.substring(0, 7) === "http://" ||
                    item.linkUrl.substring(0, 8) === "https://"
                  );
                })
            ) {
              this.msgError(
                "请输入完整的URL地址链接,http://开头或https://开头"
              );
              return false;
            }

            if(this.general.linkArray.length===0){
              this.general.linkArray.push({
                linkName: "",
                linkUrl: "",
              });
            }

            updateGeneral(this.general).then((res) => {
              if (res.code === 200) {
                this.getInfo();
                this.isEdit = !this.isEdit;
                //this.msgSuccess(res.msg)
                this.buttonName = "编辑";

                this.editIndi(indexList);
              }
            });
          } else {
            for (var key in name) {
              this.msgError(name[key][0].message);
              break;
            }
          }
        });
      }
    },
    editIndi(indexList) {
      updateIndex(indexList).then((res) => {
        if (res.code === 200) {
          this.getIndex();
          this.msgSuccess(res.msg);
        }
      });
    },

    addLink() {
      this.general.linkArray.push({
        linkName: "",
        linkUrl: "",
      });
    },
    delLink(index) {
      this.general.linkArray.splice(index, 1);
      // this.general.linkArray = this.general.linkArray.filter(
      //   item => item.linkUrl !== url
      // )
    },
    getLastNodes(val) {
      this.general.area = val[0] + "," + val[1] + "," + val[2];
    },
    getLastNodesIndustry(val) {
      this.general.industry = val[0] + "," + val[1];
    },
    beforeUploadMain(file) {
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        if (file.size > 20971520) {
          this.msgError("图片过大,不能超过20MB。");
        } else if (
          file.name.includes("&") ||
          file.name.includes("%") ||
          file.name.includes("^") ||
          file.name.includes("#") ||
          file.name.includes("*") ||
          file.name.includes("`")
        ) {
          this.msgError("图片名字包含特殊字符，不能上传");
        } else {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            const formData = new FormData();
            console.log(file);
            formData.append("images", file);
            formData.append(
              "path",
              `TJECdocuments/${this.$route.params.id}/项目概况`
            );
            uploadImages(formData).then((response) => {
              if (response.code === 200) {
                this.general.projectMain = {
                  guid: response.data[0].fileId,
                  storagePath: response.data[0].fileUrl,
                  fileName: response.data[0].fileName,
                };
              } else {
                this.msgError(response.msg);
              }
            });
          };
        }
      }
    },
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        if (file.size > 20971520) {
          this.msgError("图片过大,不能超过20MB。");
        } else if (
          file.name.includes("&") ||
          file.name.includes("%") ||
          file.name.includes("^") ||
          file.name.includes("#") ||
          file.name.includes("*") ||
          file.name.includes("`")
        ) {
          this.msgError("图片名字包含特殊字符，不能上传");
        } else {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            const formData = new FormData();
            console.log(file);
            formData.append("images", file);
            formData.append(
              "path",
              `TJECdocuments/${this.$route.params.id}/项目概况`
            );
            uploadImages(formData).then((response) => {
              if (response.code === 200) {
                this.general.bmsAttachments.push({
                  guid: response.data[0].fileId,
                  storagePath: response.data[0].fileUrl,
                  fileName: response.data[0].fileName,
                });
              } else {
                this.msgError(response.msg);
              }
            });
          };
        }
      }
    },
    
    delimgMain() {
      this.general.projectMain=undefined;
    },
    delimg(index) {
      this.general.bmsAttachments.splice(index, 1);
    },
    toIndex() {
      if (!this.isEdit) {
        this.$router.push("/projectList/projectIndex/" + this.$route.params.id);
      }
    },
    preview(index) {
      alert("预览" + index);
    },
    download(index) {
      alert("下载" + index);
    },
    nextPage() {
      this.currentImg++;
    },
    prevPage() {
      this.currentImg--;
    },
    changeshow0() {
      this.showinfo0 = !this.showinfo0;
    },
    changeshow1() {
      this.showinfo1 = !this.showinfo1;
    },
    changeshow2() {
      this.showinfo2 = !this.showinfo2;
    },
    changeShowProject(val){
      if(val && val==='1'){
        this.isShowFlag = true;
      }else{
        this.isShowFlag = false;
      }
    },
    changeIsShare(val){
      if(val && val==="2"){
        this.msgError("选择部分分享时，除本项目团队成员以外的其他用户，只能查看以下信息：项目代码、可从事的业务类别、项目进展、所在地区、所属行业、建设内容及规模、展示项目名称、项目概况描述、项目所获荣誉、项目展示主图、项目展示图片、包含工程类别、细分类别");
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.nav{
  border-bottom: 1px solid #d9dbdf;
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 20px 0;
  background-color: #FFF;
}
.nav>.left{
  width: 90%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.nav>.left>.tag{
  display: inline-block;
  width: 4px;
  height: 10px;
  background: linear-gradient(212deg,#4a97ff 0%, #5073e6 86%);
}
.nav>.left>.label{
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #26314a;
  padding: 0 20px;
}
.nav>.right{
  width: 10%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  color: #596174;
}
.nav>.right>.icon{
  padding-left: 20px;
}
.el-row{
  padding-bottom: 15px;
}

.el-col-8 {
  padding-left: 40px !important;
}
.el-col-16 {
  padding-left: 40px !important;
}
.el-col-24 {
  padding-left: 40px !important;
}
.content {
  font-size: 14px;
  word-break: break-word;
  margin-top: 9px;
  padding-left: 15px;
}
.title {
  height: 50px;
  width: 100%;
  display: flex;
  // border-bottom: 1px solid #dfe6ec;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  padding: 0 20px;
  .title-name {
    width: 100px;
    font-size: 14px;
    color: #2a5e86;
  }
  .tag-button {
    flex: 1;
    text-align: right;
  }
  .title-icon {
    cursor: pointer;
    margin-left: 10px;
  }
}
.tabletitle {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 0 20px;
  background-color: #fff;
  border-radius: 2px;
  .input-wrap {
    // padding: 8px;
    display: flex;

    .input-label {
      min-width: 1em;
      max-width: 9em;
      color: #26314a;
      margin-right: 8px;
      text-align: right;
      margin-top: 9px;
      flex: 0 0 120px;
      font-weight: 600;
      font-size: 14px;
    }

    .input-content {
      -webkit-box-flex: 1;
      flex-grow: 1;
      /deep/.el-input__inner {
        font-family: PingFangSC-Regular;
        // font-size: 16px !important;
        color: rgba(0, 0, 0, 0.85);
      }
      .el-select {
        width: 100%;
      }
    }
  }
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
// .el-row {
//   margin: 30px !important;
// }

/deep/ .upload-demo {
  width: 225px;
  height: 225px;
  margin-right: 50px;
  // .el-upload {
  //   width: 100%;
  .el-upload-dragger {
    width: 225px;
    height: 225px;
  }
  // }
}
.uploadicon {
  margin-right: 5px;
}
.el-carousel__item h3 {
  color: #596174;
  font-size: 14px;
  opacity: 0.75;
  // line-height: 225px;
  margin: 0;
}

.el-carousel__item {
  // background-color: #99a9bf
  background-color: #fff;
}
/deep/.el-input.is-disabled {
  .el-input__prefix {
    display: none;
  }
  .el-input__suffix {
    display: none;
  }
}

/deep/.el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border-color: #fff;
  color: #596174;
  cursor: auto;
  padding-left: 15px;
}
/deep/.el-input.is-disabled .el-input__inner:hover {
  background-color: #fff;
  border-color: #fff;
  color: #596174;
  cursor: auto;
}
/deep/.el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-ms-input-placeholder {
  color: #fff;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  border-color: #fff;
  color: #596174;
  resize: none;
  cursor: auto;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder {
  color: #fff; 
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
  color: #fff;
}

/deep/.el-carousel__arrow {
  background-color: rgba(31, 45, 61, 0.5);
  width: 56px;
  height: 56px;
  .el-icon-arrow-right:before {
    font-size: 18px;
  }
}
/deep/.el-carousel__container {
  height: 250px;
}

      .el-form .el-form-item .el-form-item__content .el-select {
        width: 185px;
      }
      .el-form .el-form-item .el-form-item__content .el-input {
        width: 185px;
      }
      .el-form .el-form-item .el-form-item__content .el-textarea {
        width: 185px;
      }
</style>